<?php
use yii\helpers\Url;
use app\models\Supplier;
use app\components\JSSDK;

$supplier = Supplier::find()->where(['status'=>1])->asArray()->all();
$supplier = yii\helpers\ArrayHelper::map($supplier,'id','company');

$this->title = "邮轮列表";

//邮轮公司logo
$logo_path = [
        3=>'/img/logo/costa.png',
        4=>'/img/logo/msc.png',
        5=>'/img/logo/rc.png',
        6=>'/img/logo/norwegian.png',
        7=>'/img/logo/princess.png',
        8=>'/img/logo/lx.png',
        9=>'/img/logo/xm.png',
        10=>'/img/logo/10.jpg',
    ]; 
//载重排序
$weight  = [
    1  => '载重由高到低',
    -1 => '载重由低到高',
];
$times = [
    2  =>'首航时间由近到远',
    -2 =>'首航时间由远到近',
];


$jssdk = new JSSDK("wxdf104a667847eb11", "1e1b098e7c4f442d94fe3499463238f2");
$signPackage = $jssdk->GetSignPackage();
?>

<?= yii\web\View::registerCssFile("/css/front/index.css",['depends' => 'app\assets\MuiAsset']) ?>
<script type="text/javascript" src="/js/iconfont.js"></script>

<style type="text/css">
     body{background-color: #f7f7f8;}
    .mui-bar-nav{background-color: #f7f7f8}
    .city{background-color: #f7f7f7}
    .text-center{text-align: center;}
    .mui-popover {height: 300px;}
    .city{color: #0A95CC;margin-top: 0px;}
    .city p{color: #0A95CC;font-size: 16px;}
    .city .iconfont{color: #0A95CC;font-size: 18px;}
    .mui-content{background:#f7f7f8;}
    .mui-bar-tab{background-color:#f7f7f8; /*border: 0 !important;box-shadow: 0 0 0 rgba(0,0,0,1)*/;}
    .mui-tab-item{margin-top: 5px;}
    .mui-tab-item .iconfont{padding: 0.5rem 0.1rem}
    .mui-tab-item .tab-label{font-size: 0.7rem}
    .pic-box{width: 100%;position: absolute;z-index: 2;left: 0;top: 0;background: url(/img/bg_opacity40.png);height: 60vw;text-align: center;}
    .pic-title{margin-top: 15vw;margin-bottom: 5vw;}
    .pic-box-name{font-size:1.4rem;color: #FFF;}
    .pic-box-en{font-size: 1.2rem;color: #FFF;padding-left: 2vw;}
    .pic-img{margin-bottom: 5vw;}
    .pic-img label{background-color: #FFFFFF;height: 10vw;filter:alpha(opacity=70);
      -moz-opacity:0.7;  
      opacity: 0.7; line-height: 10vw;padding:3vw;border-radius: 6px;}

    .mui-card-new{background-color:transparent !important;box-shadow: none !important;}  
    .mui-card-new .mui-input-group{background-color:transparent}
    .mui-card-content-inner{padding-bottom: 0px;}
    .mui-card-header {border-radius:0px;}
    .mui-tab-item .iconfont {padding-bottom:0px;}
    .mui-bar-tab .mui-tab-item.mui-active{color: rgb(41, 167, 226);}
    .mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{color: rgb(41, 167, 226);}

    .icon {
       width: 1.4rem; height: 1.4rem;
       vertical-align: -0.3em;
       fill: currentColor;
       overflow: hidden;
    }
</style>


<nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item"  href="#Pop_company"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-youlungongsi1"></use></svg><br><span class="tab-label">邮轮公司</span></a>
        <a class="mui-tab-item"  href="#Pop_times"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-rilishaixuan1"></use></svg><br><span class="tab-label">首航时间</span></a>
        <a class="mui-tab-item"  href="#Pop_weight"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-zaizhongshaixuan1"></use></svg><br><span class="tab-label">邮轮载重</span></a>
</nav>


<div class="mui-content">

   <div class="cruise-lines">
            
            <?php foreach($cruises as $v){?>
            <div class="mui-card" style="margin:10px 0px;border-radius:0px;" >
                <div class="mui-card-header mui-card-media img" style="height:60vw;background-image:url(<?=\Yii::$app->params['qiniu_path'].$v['imageOne']['path'].'?imageView2/1/w/640/h/480'?>)" data-href="<?=Url::toRoute(['cruise','id'=>$v['id']])?>" ></div>
                <div class="pic-box" data-href="<?=Url::toRoute(['cruise','id'=>$v['id']])?>" >
                    <div class="pic-title">
                      <span class="pic-box-name"><?=$v['name']?></span>
                      <span class="pic-box-en"><?=$v['en_name']?></span>
                    </div>  
                    <div class="pic-img">
                          <label style="color: #333;">
                           <img src="<?=isset($logo_path[$v['supplier_id']])?$logo_path[$v['supplier_id']]:'/img/logo/400.png';?>" style="height:1rem;vertical-align: middle;line-height: 1rem" >
                           <span style="font-size:1rem;height: 1rem;vertical-align: middle;line-height: 1rem;color: #a664a6"><?=$v['supplier']['company']?></span>
                          </label>
                    </div>
                    <div class="pic-year" style="color: #FFFFFF;font-size: 0.8rem">
                      <?php if(!empty($v['first'])){?>
                          <span style="font-size: 1.2rem"><?=$v['first'];?></span>年/首航
                      <?php }else{?>
                          <span style="font-size: 1.2rem"><?=$v['renovation'];?></span>年/翻修
                      <?php };?>
                      
                    </div>
                </div>
                <div class="mui-card-content">
                  <div class="mui-card-content-inner">
                   
                    <div class="mui-row" style="color:#666;">

                      <div class="mui-col-xs-4" style="margin-top:0.1rem;width:34%;">
                            <div class="mui-row" >
                                <p class="mui-col-xs-3" style="text-align: right;line-height:48px;margin-bottom: 2px;"> 
                                  <i class="iconfont" style="font-size: 1.25em">&#xe6bc;</i>
                                </p>
                                 <p class="mui-col-xs-9 text-center " style="text-align: center;margin-bottom: 2px;font-size: 0.75em"> 
                                  <span>载客</span><br>
                                  <span style="font-size: 1em;color:#333;"><?=\yii::$app->formatter->asDecimal($v['num'])?></span>人 
                                 </p>
                             </div>
                        </div>
                        <div class="mui-col-xs-4" style="margin-top:0.1rem;width:33%;">
                            <div class="mui-row" >
                                <p class="mui-col-xs-4" style="text-align: right;line-height:48px;margin-bottom: 2px;"> 
                                  <i class="iconfont" style="font-size: 1.25em">&#xe6bb;</i>
                                </p>
                                <p class="mui-col-xs-8 text-center " style="text-align: center;margin-bottom: 2px;font-size: 0.75em"> 
                                  <span>楼层</span><br>
                                  <span style="font-size: 1em;color:#333;"><?=\yii::$app->formatter->asDecimal($v['ceil'])?></span>层 
                                </p>
                            </div>
                        </div>

                      <div class="mui-col-xs-4" style="margin-top:0.1rem;width:33%;">
                            <div class="mui-row" >
                                <p class="mui-col-xs-3" style="text-align: right;line-height:48px;margin-bottom: 2px;"> 
                                <i class="iconfont" style="font-size: 1.25em">&#xe6b1;</i>
                                </p>
                                <p class="mui-col-xs-8 text-center " style="text-align: center;margin-bottom: 2px;font-size: 0.75em"> 
                                  <span>载重</span><br>
                                  <span style="font-size: 1em;color:#333;"><?=\yii::$app->formatter->asDecimal($v['weight'])?></span>吨 
                                </p>
                            </div>
                      </div>
                    </div>
                   
                    <p style="color: #333;"></p>
                  </div>
                </div>
                
          </div>
           <?php }?>
   </div>

    
</div>

<div id="Pop_times" class="mui-popover" style="height:120px">
            <div class="mui-popover-arrow"></div>
            <div class="mui-scroll-wrapper">             
                <div class="mui-scroll">
                    <div class="mui-card mui-card-new">
                        <div class="mui-input-group" id="day">
                           <?php foreach($times as $k=>$v){?>
                            <div class="mui-input-row mui-radio">                                
                                <label class="lines_label"><?=$v?></label>
                                <input class="time_sort" name="time_sort" type="radio" value="<?=$k?>" <?= (isset($params['sort']) && $params['sort'] == $k) ? 'checked' : ''?>>
                            </div>
                          <?php };?>     
                            
                            
                        </div>
                    </div>
                </div>
            </div>
</div>

<div id="Pop_weight" class="mui-popover" style="height: 120px;">
            <div class="mui-popover-arrow"></div>
          
            <div class="mui-scroll-wrapper">
                
                <div class="mui-scroll">
                    <div class="mui-card mui-card-new">
                        <div class="mui-input-group" id="day">
                            <?php foreach($weight as $k=>$v){?>
                            <div class="mui-input-row mui-radio">                                
                                <label class="lines_label"><?=$v?></label>
                                <input class="weight_sort" name="weight_sort" type="radio" value="<?=$k?>" <?= (isset($params['sort']) && $params['sort'] == $k) ? 'checked' : ''?>>
                            </div>
                          <?php };?>     
                        
                            
                            
                        </div>
                    </div>
                </div>
            </div>
</div>

<div id="Pop_company" class="mui-popover">
            <div class="mui-popover-arrow"></div>
          
            <div class="mui-scroll-wrapper">
                
                <div class="mui-scroll">
                    <div class="mui-card mui-card-new">
                        <div class="mui-input-group" id="day">
                          <div class="mui-input-row mui-radio">                                
                                <label class="lines_label">不限</label>
                                <input class="supplier_id" name="supplier_id" type="radio" value="0" <?= (isset($params['supplier_id']) && $params['supplier_id'] == 0) ? 'checked' : ''?> >
                            </div>   
                            <?php foreach($supplier as $k=>$v){?>
                            <div class="mui-input-row mui-radio">                                
                                <label class="lines_label"><?=$v?></label>
                                <input class="supplier_id" name="supplier_id" type="radio" value="<?=$k?>" <?= (isset($params['supplier_id']) && $params['supplier_id'] == $k) ? 'checked' : ''?>>
                            </div>
                          <?php };?>     
                            
                            
                        </div>
                    </div>
                </div>
            </div>
</div>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<?php app\components\JsBlock::begin() ?>
<script type="text/javascript">


mui('body').on('tap',".img",function(){
    href = $(this).attr("data-href");
    document.location.href=href;
});
mui('body').on('tap',".pic-box",function(){
    href = $(this).attr("data-href");
    document.location.href=href;
});

var url = "<?= yii::$app->request->getUrl() ?>";    
var sign = (url.indexOf('?') == -1) ?  "?" : "&";


$(".time_sort").click(function(){
      var time_val = 0;       
      time_val = $('input[name="time_sort"]:checked').val();
      location.href = url + sign + "sort=" + time_val;
});

$(".weight_sort").change(function(){
      var weight_sort = 0;       
      weight_sort = $('input[name="weight_sort"]:checked').val();
      location.href = url + sign + "sort=" + weight_sort;
});

$(".supplier_id").change(function(){
     var com_val = 0;
     var com_val = $('input[name="supplier_id"]:checked').val();
     location.href = url + sign + "supplier_id=" + com_val;
});

mui.init();
mui('body').on('shown', '.mui-popover', function(e) {});
mui('body').on('hidden', '.mui-popover', function(e) {});   

mui('.mui-scroll-wrapper').scroll();

mui('body').on('tap','a',function(){document.location.href=this.href;});


wx.config({
    debug: false,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: '<?php echo $signPackage["timestamp"];?>',
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中
      'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',

    ]
});


wx.ready(function(){
  var title = '邮轮旅游平台-邮轮列表';
  var desc = '邮轮旅游平台-邮轮列表';
  var link = '<?=sprintf("%s/front/default/cruise-list",yii::$app->request->getHostInfo())?>';
  var imgUrl = '<?=\Yii::$app->params['qiniu_path'].'/uploads/201706/1594cb321be769.jpg?imageView2/1/w/640/h/420';?>';
  
  wx.onMenuShareTimeline({
    title:desc,
    desc:desc,
    link:link,
    imgUrl:imgUrl,
    
  });
  wx.onMenuShareQQ({
    title:title,
    desc:desc,
    link:link,
    imgUrl:imgUrl,
    
  });
  wx.onMenuShareWeibo({
    title:title,
    desc:desc,
    link:link,
    imgUrl:imgUrl, 
  });
  wx.onMenuShareAppMessage({
    title:title,
    desc:desc,
    link:link,
    imgUrl:imgUrl,
  });
  wx.onMenuShareQZone({
    title:title,
    desc:desc,
    link:link,
    imgUrl:imgUrl,
    
  });
      
  
});

</script>
<?php app\components\JsBlock::end() ?>
